import './ScrollView.scss'
import React from'react'
import {connect} from'react-redux'
//滚动加载组件
 class ScrollView extends React.Component{
  constructor(props){
    super(props)
    this._onLoadPage = this.onLoadPage.bind(this)
  }
  onLoadPage() {
    let clientHeight = document.documentElement.clientHeight
    let scrollHeight = document.body.scrollHeight
    let scrollTop = document.documentElement.scrollTop
    let proLoadDis = 30
    if ((scrollTop + clientHeight) >= (scrollHeight - proLoadDis)) {
      if (!this.props.isend){
        if (!this.props.readToLoad){
          return;
        }
        this.props.loadCallback && this.props.loadCallback()
      }
    }
  }
  
  UNSAFE_componentWillMount() {
    window.addEventListener('scroll', this._onLoadPage)
  }
  
  componentWillUnmount() {
    window.removeEventListener('scroll', this._onLoadPage)
  }
  render() {
    return(
      <div className='scrollview'>
        {this.props.children}
      </div>
    )
  }
}
export default connect(
  state=>({
    readToLoad:state.scrollViewReducer.readToLoad
  })
)(ScrollView)